abaabil.inputgroup

Input Component

The Input component is a versatile and accessible input element designed for React applications. It supports various input types, icons, prefixes, and suffixes, making it ideal for forms and user input sections in your app.

Installation

To use the Input component, first install the package from npm:

npm install abaabil.input

Importing

You can import the Input component directly from the abaabil.input package:

import Input from 'abaabil.input';

Alternatively, you can import it from the main abaabil package:

import { Input } from 'abaabil';

Usage

Here's a basic example of how to use the Input component:

<Input
  id="example-input"
  label="Example Label"
  leadingIcon="photo"
  trailingIcon="photo"
  placeholder="Type here..."
/>

Input Types

The Input component supports various input types, allowing for flexibility in different scenarios:

<div className="space-y-4">
  <Input id="text-input" label="Text Input" placeholder="Type here..." />
  <Input id="password-input" label="Password Input" type="password" placeholder="Password" />
  <Input id="email-input" label="Email Input" type="email" placeholder="Email" />
  <Input id="search-input" label="Search Input" type="search" placeholder="Search" />
  <Input id="number-input" label="Number Input" type="number" placeholder="Number" />
  <Input id="date-input" label="Date Picker" type="date" />
  <Input id="time-input" label="Time Picker" type="time" />
  <Input id="datetime-input" label="Date-Time Picker" type="datetime-local" />
</div>

Props

The Input component accepts the following props:

Prop Name	Type	Description
id	string	The unique identifier for the input field.
label	string	The label for the input field.
type	string	The type of input field (e.g., text, password, email, number, etc.).
value	string	The value of the input field.
placeholder	string	The placeholder text for the input field.
leadingIcon	string	Tabler icon ID to display at the start of the input field.
trailingIcon	string	Tabler icon ID to display at the end of the input field.
prefix	node	Content to display before the input field, such as an icon or text.
suffix	node	Content to display after the input field, such as an icon or text.
containerClassName	string	Additional CSS classes to apply to the outer container.
labelWrapperClassName	string	Additional CSS classes to apply to the label element.
prefixAndSuffixClassName	string	Additional CSS classes to apply to both the prefix and suffix elements.
inputElementClassName	string	Additional CSS classes to apply to the input element itself.
disabled	bool	Whether the input field is disabled.
ariaLabel	string	Defines a string value that labels the input field.
ariaDescribedBy	string	Identifies the element that describes the input field.
ariaRequired	bool	Indicates whether the input field is required.
onChange	function	Callback function that triggers when the input value changes.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

We welcome contributions to improve this component. Please submit a pull request or raise an issue to discuss any changes.

Acknowledgments

Thanks to everyone who contributed to the development of this component.